<template>
  <router-link 
    :to="{ name: 'explore', query: { category: categoryId } }"
    class="h-20 min-w-[112px] flex items-center gap-3 px-4 bg-white rounded-xl shadow-sm ring-1 ring-gray-200 hover:shadow-md transition cursor-pointer"
  >
    <div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center text-[#635BFF]">
      <slot name="icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4h14v2H5V4zm0 7h14v2H5v-2zm0 7h14v2H5v-2z"/></svg>
      </slot>
    </div>
    <div class="text-sm text-gray-700">{{ label }}</div>
  </router-link>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getCategoryByName } from '@/config/categories'

const props = defineProps<{ 
  label: string 
}>()

const categoryId = computed(() => {
  const category = getCategoryByName(props.label)
  return category?.id || 'all'
})
</script>


